<template>
  <div class="ref-container">
    <hr>
    <!-- vue2.0 获取div元素 -->
    <!-- 1.通过ref属性绑定元素 -->
    <!-- 2.通过this.$refs.box获取元素 -->
    <!--<div ref="box">我是vue2.0 box</div>-->

    <!-- vue.2.0获取v-for遍历的多个元素 -->
    <!-- 1.通过ref属性绑定被遍历元素 -->
    <!-- 2.通过this.$refs.li 获取所有遍历元素 -->
    <!--<ul>-->
    <!--  <li v-for="i in 4" :key="i" ref="li"></li>-->
    <!--</ul>-->


    <!-- 单个元素 -->
    <div ref="boxRef">我是vue3.0 box</div>
    <div ref="domRef">我是vue3.0 dom</div>

    <!-- 被遍历的元素 -->
    <ul>
      <li v-for="i in 4" :key="i" :ref="setLiFunc">第 {{ i }} li标签</li>
    </ul>
  </div>
</template>

<script>

import {onMounted, ref} from "vue";

export default {
  name: "refAttr",
  setup() {
    // vue3.0的思路是反过来的, 先定义响应式数据, 然后return, 元素在使用ref绑定响应式数据
    // 1.获取单个元素
    // 1.先定义一个空的响应式数据 ref
    // 2.setup中返回该数据, 你想获取那个dom元素, 使该元素上使用ref属性绑定该数据即可
    const boxRef = ref(null)
    const domRef = ref(null)

    onMounted(() => {
      // console.log(boxRef.value) // <div>我是vue3.0 box</div>
      // console.log(domRef.value) // <div>我是vue3.0 dom</div>
    })

    // 2.获取v-for遍历的对象
    // 2.1.定义一个空数组, 接收所有的LI
    // 2.2.定义一个函数, 返回给模板使用, v-for遍历的元素通过ref绑定这个哈数
    // 2.3.上面定义的函数中的cb回调函数, 往空数组中 push DOM
    // const domList = reactive([])
    const domList = []
    const setLiFunc = (el) => {
      console.log('setLiFunc')
      domList.push(el)
    }
    // 想在 setup 中打印获取到的dom元素, 必须在 onMounted 生命周期函数里面!!!
    onMounted(() => {
      domList.forEach((item) => {
        console.log(item)
      })
    })

    return {
      boxRef,
      domRef,
      setLiFunc
    }
  }
}
</script>

<style scoped>

</style>
